<template>
    <el-dialog
        title="角色权限设置"
        v-model="state.visible"
        :width="500"
        destroy-on-close
        @closed="emit('closed')"
    >
        <div class="treeMain">
            <el-tree
                ref="rule"
                node-key="id"
                show-checkbox
                :data="state.rule.list"
                :default-expand-all="true"
                :props="state.rule.props"
            />
        </div>
        <template #footer>
            <el-button @click="state.visible = false">取 消</el-button>
            <el-button type="primary" :loading="state.isSaveing" @click="submit()">
                保 存
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import roleApi from "@/api/system/role"
import ruleApi from "@/api/system/rule"
import {getCurrentInstance, nextTick, reactive, ref} from "vue"

const {proxy} = getCurrentInstance()
const emit = defineEmits(["success", "closed", "getNewData"])
const state = reactive({
    checkIds: [],
    visible: false,
    isSaveing: false,
    row: {
        id: 0,
        rules_checked: ''
    },
    rule: {
        list: [],
        checked: [],
        props: {
            label: (data) => {
                return data.name
            }
        }
    },
})

const rule = ref(null)

const open = (row) => {
    state.row = row
    state.visible = true;
    getRule()
}

const submit = async () => {
    state.isSaveing = true;
    //选中的和半选的合并后传值接口
    const checkedKeys = rule.value.getCheckedKeys().concat(rule.value.getHalfCheckedKeys());
    const checked = rule.value.getCheckedKeys().join(',')
    let checkIds = checkedKeys.join(',');
    const data = {
        rules: checkIds,
        id: state.row.id,
        rules_checked: checked
    }
    const res = await roleApi.edit.post(data);
    if (res.code === 0) {
        state.isSaveing = false;
        state.visible = false;
        proxy.$message.success("操作成功")
        emit('success')
        emit('getNewData')
    } else {
        await proxy.$alert(res.message, "提示", {type: 'error'})
    }
}

const getRule = async () => {
    const res = await ruleApi.list.get({
        app_id: state.row.app_id
    });
    if (res.code === 0) {
        state.rule.list = res.data
        state.checkIds = state.row.rules.split(',')
        //实时设置选中的tree
        await nextTick(() => {
            state.checkIds.forEach(item => {
                rule.value.setChecked(item, true, false)
            })
        })
    } else {
        await proxy.$alert(res.message, "提示", {type: 'error'})
    }
}

const setData = (data) => {
    state.row = data
}

//暴露给父组件的方法
defineExpose({
    open, setData
})

</script>

<style scoped>
.treeMain {
    height: 280px;
    overflow: auto;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
}
</style>
